<template>
  <div ref="chartDom" style="width: 100%; height: 100%;"></div>
</template>  

<script setup>
import * as echarts from 'echarts';
import {
    ref,
    reactive,
    onMounted,
    onBeforeUnmount
} from 'vue'
const props = defineProps({
  options: Object,
  type: String
})

const chartDom = ref(null);

function initChart() {
  const myChart = echarts.init(chartDom.value);
  myChart.setOption(props.options);

  // 根据需要监听窗口大小变化等
  window.addEventListener('resize', () => {
    myChart.resize();
  });
}
onMounted(() => {
  initChart();
})
onBeforeUnmount(() => {
  // 清理事件监听
  window.removeEventListener('resize', () => {
    // 这里假设已经有一个引用指向了 echarts 实例
    // 但由于示例中未保存实例引用，这里仅作说明
    // myChart.dispose();
  });
})
</script>